<template>
  <div class="data">
    <div class="data-title">
      <div class="titl1">
        可视化3D地球自旋转
      </div>
    </div>
    <div class="data-content">
      <div class="con-left fl">

      </div>

      <div class="con-center fl displayflex align-items justify-content" @click.stop="handleCicle">
        <div class="demo"></div>
        <img class="cicle2" src="../../assets/img/circle1.png" />
        <div class="cicle_box justify-content">
          <img class="cicle3" src="../../assets/img/bottom_icon.png" />
        </div>
        <!-- <div class="cicle3"></div> -->
      </div>

      <div class="con-right fr">

      </div>
    </div>
    <div id="container" ref="content"></div>
    <div class=" lineHeight text-align bottom—name toptitle" v-if="servePlatform == 5">
      <img style="height:20px;width:20px;margin:0 10px;position: relative;top:3px;" src="../../assets/img/record.png" />
      <a href="https://beian.miit.gov.cn/" target="_blank">蜀ICP备2022026667号-1</a>
    </div>
  </div>
</template>

<script>
import { reactive, ref, onBeforeUnmount, getCurrentInstance } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import api from "../../api/api";
import * as THREE from "three"; //引入three.js
let userInfo = null,
  accountInfo = null;
import {
  OrbitControls,
  MapControls,
} from "three/examples/jsm/controls/OrbitControls.js";
// 创建一个场景,      // 创建一个相机
let scene, camera, renderer, mesh;
export default {
  name: "dashboard",
  components: {},
  data() {
    return {
      plane: null,
      // 点光源
      point: null,
      // step
      step: 0,
      controls: null,
    };
  },
  mounted() {
    // onresize 事件会在窗口被调整大小时发生
    // window.addEventListener("resize", function () {
    //   renderer.setSize(window.innerWidth, window.innerHeight);
    //   camera.updateProjectionMatrix();
    // });
    // window.onresize = function () {
    //   debugger
    //   // 重置渲染器输出画布canvas尺寸
    //   renderer.setSize(window.innerWidth, window.innerHeight);
    //   // 重置相机投影的相关参数
    //   let k = window.innerWidth / window.innerHeight; //窗口宽高比
    //   // camera.left = -s * k;
    //   // camera.right = s * k;
    //   // camera.top = s;
    //   // camera.bottom = -s;
    //   // 渲染器执行render方法的时候会读取相机对象的投影矩阵属性projectionMatrix
    //   // 但是不会每渲染一帧，就通过相机的属性计算投影矩阵(节约计算资源)
    //   // 如果相机的一些属性发生了变化，需要执行updateProjectionMatrix ()方法更新相机的投影矩阵
    //   camera.updateProjectionMatrix();
    // };
    this.init();
    window.addEventListener(
      "resize",
      function () {
        if (renderer) {
          renderer.setSize(window.innerWidth, window.innerHeight);
          // 全屏情况下：设置观察范围长宽比aspect为窗口宽高比
          camera.aspect = window.innerWidth / window.innerHeight;
          camera.updateProjectionMatrix();
        }

      },
      false
    );
  },
  methods: {
    // 初始化
    init() {
      // 初始化容器
      var content = this.$refs.content;
      // 创建一个场景
      scene = new THREE.Scene();
      // scene.background = new THREE.Color("#ff0000");
      // 创建几何体
      // console.log(window.innerWidth)
      var geometry = new THREE.SphereGeometry(42, 75, 75);
      // 纹理加载器 （ 此处加载贴图 ）
      var texture = new THREE.TextureLoader().load(
        "../../src1/assets/img/4096_earth.png"
      );
      // 几何体材质对象
      var material = new THREE.MeshLambertMaterial({
        map: texture,
        color: 0xffffffff,
      });
      // 创建网格模型对象
      mesh = new THREE.Mesh(geometry, material);
      //设置几何体位置
      mesh.position.x = 0;
      mesh.position.y = -5;
      mesh.position.z = 0;
      mesh.rotation.y += 90;
      scene.add(mesh);

      // 创建点光源
      var point = new THREE.PointLight(0xffffff);
      point.position.set(50, 300, 50);
      this.point = point;
      scene.add(point);

      const sphereSize = 10;
      const pointLightHelper = new THREE.PointLightHelper(point, sphereSize);
      scene.add(pointLightHelper);

      //创建环境光
      var ambient = new THREE.AmbientLight(0x444444);
      scene.add(ambient);

      // 创建一个相机
      camera = new THREE.PerspectiveCamera(
        65,
        window.innerWidth / window.innerHeight,
        2,
        10000
      );
      camera.position.set(-50, 70, 100);
      camera.lookAt(0, 0, 0);
      camera.updateProjectionMatrix();
      // // 坐标轴辅助器，X,Y,Z长度30
      // var axes = new THREE.AxesHelper(300);
      // scene.add(axes);
      // // 辅助网格
      // let gridHelper = new THREE.GridHelper(100, 100);
      // scene.add(gridHelper);

      // 创建渲染器
      renderer = new THREE.WebGLRenderer({
        alpha: true,
      });
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.setClearColor(0xb9d3ff, 0.1);
      //插入 dom 元素
      content.appendChild(renderer.domElement);
      //   console.log("1111", OrbitControls);
      // this.controls = new OrbitControls(camera, renderer.domElement);
      // this.controls = new MapControls(camera, renderer.domElement);
      this.controls = new OrbitControls(camera, renderer.domElement); //创建控件对象
      this.controls.enableZoom = false; //禁止缩放
      // this.controls.enableRotate = false; //禁止旋转
      this.controls.enablePan = false; //禁止平移
      this.render();
      // this.controls.addEventListener("resize", this.render, false);
    },
    render() {
      renderer.render(scene, camera);
      // 自动旋转动画
      mesh.rotateY(0.003);
      requestAnimationFrame(this.render);
    },
  },
  setup() {
    const router = useRouter();
    const activeIndex = ref(0);
    let { proxy } = getCurrentInstance();
    const platformName = ref("");
    proxy.$store.dispatch('getplatformName').then((res) => {
      platformName.value = res;
    })
    //servePlatform == 1为测试服  servePlatform ==2电信(盈江)
    // servePlatform ==3 正式 servePlatform ==4 包头 servePlatform ==5 巴中
    const servePlatform = ref(api.servePlatform());
    const handleMouseEnter = (index) => {
      activeIndex.value = index;
    };
    const getloginAccountInfo = () => {
      api
        .getListAPI("auth/client/account/loginAccountInfo", {})
        .then((res) => {
          accountInfo = res;
          if (res.data.code == 1) {
            userInfo = res.data.data.accountInfoDTO;
            localStorage.setItem("ms_username", userInfo.realName);
            var userInfoStr = JSON.stringify(userInfo);
            localStorage.setItem("userInfo", userInfoStr);
          }
          //数据处理
        })
        .catch((err) => {
          console.log(err);
        });
    };
    getloginAccountInfo();
    const handleRouter = (index) => {
      if (index == 1) {
        if (accountInfo && accountInfo.data.code == 401) {
          router.push("/login");
          ElMessage.error("请重新登录");
          return;
        } else {
          if (userInfo && userInfo.businessAuthState == 1) {
            router.push("/authentica");
          } else if (userInfo && userInfo.authState == 1) {
            router.push("/user");
          } else if (
            userInfo &&
            (userInfo.authState == -1 ||
              userInfo.businessAuthState == -1 ||
              userInfo.authState == 0 ||
              userInfo.businessAuthState == 0 ||
              userInfo.authState == 10 ||
              userInfo.businessAuthState == 20)
          ) {
            router.push("/identity");
          }
        }
      } else if (index == 2) {
        if (accountInfo && accountInfo.data.code == 401) {
          router.push("/login");
          ElMessage.error("请重新登录");
          return;
        } else {
          router.push("/forestryList");
        }
      } else if (index == 3) {
        router.push("/pledge");
      } else if (index == 4) {
        if (accountInfo && accountInfo.data.code == 401) {
          router.push("/login");
          ElMessage.error("请重新登录");
          return;
        } else {
          router.push("/CarbonTicket");
        }
      } else if (index == 5) {
        if (accountInfo && accountInfo.data.code == 401) {
          router.push("/login");
          ElMessage.error("请重新登录");
          return;
        } else {
          router.push("/myCarbonTicket");
        }
      } else if (index == 6) {
        router.push("/Carbon_ticket_hall");
      } else if (index == 7) {
        router.push("/neutralize");
      } else if (index == 8) {
        router.push("/information");
      }
    };
    const handleCicle = () => { };
    onBeforeUnmount(() => {
      renderer.forceContextLoss();
      scene.clear();
      scene = null;
      camera = null;
      renderer.dispose();
      mesh = null;
    });
    return {
      activeIndex,
      platformName,
      servePlatform,
      handleMouseEnter,
      handleRouter,
      handleCicle,
    };
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/css/index.css";
@import "../../assets/css/common.css";
@import "../../assets/css/icono.min.css";
@import "../../assets/css/style.css";
@import "../../assets/css/map.css";

.data {
  position: relative;
}

.data-title {
  position: relative;
}

.head_msg {
  position: absolute;
  top: 20px;
  right: 40px;
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  line-height: 26px;
  z-index: 9999;
}

.el-icon-bell {
  color: #fff;
  margin-right: 10px;
}

.select_icon {
  position: absolute;
  width: 100%;
  height: 9.375rem;
  z-index: 9;
}

.model_icon {
  height: 9.375rem;
  position: relative;
  margin-bottom: 15px;
}

.homeIcon {
  width: 4rem;
  height: 4rem;
  margin: 0 0.625rem;
}

.model_title {
  height: 100%;
  position: absolute;
  z-index: 99;
  color: #fff;
}

.model_title_right {
  text-align: right;
}

.model_title .title1 {
  font-size: 2rem;
  font-family: Source Han Sans CN;
  margin-bottom: 10px;
}

.demo {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#container {
  position: absolute;
  height: 100%;
  min-width: 1200px;
  max-width: 2300px;
  overflow: hidden;
  // z-index: 9999;
}

.width85 {
  width: 85%;
}

.width75 {
  width: 75%;
}

.width80 {
  width: 80%;
}

@media (min-width: 1200px) and (max-width: 1400px) {
  .homeIcon {
    width: 3rem;
    height: 3rem;
    margin: 0 0.425rem;
  }

  .model_title .title1 {
    font-size: 1.5rem;
    font-family: Source Han Sans CN;
  }
}

@media (min-width: 200px) and (max-width: 1199px) {
  .homeIcon {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 0.425rem;
  }

  .model_title .title1 {
    font-size: 1rem;
    font-family: Source Han Sans CN;
  }
}

// @media (max-width: 1000px) {
//   .homeIcon {
//     width: 4rem;
//     height:4rem;
//     margin: 0 0.425rem;
//   }
//   .model_title .title1 {
//   font-size: 2rem;
//   font-family: Source Han Sans CN;
// }
// }
.lineHeight {
  height: 35px;
}

.toptitle {
  position: fixed;
  bottom: 0;
  left: 42%;
}

.toptitle>a {
  color: #fff;
}
</style>
